<template>
  <view class="mobile-page">
    <!-- 动态波浪背景 -->
    <view class="wave-bg">
      <view class="wave" v-for="(wave, i) in waves" :key="i"
            :style="{
              background: wave.color,
              height: `${wave.height}px`,
              bottom: `${wave.bottom}px`,
              animationDuration: `${wave.duration}s`,
              animationDelay: `${wave.delay}s`
            }"></view>
    </view>

    <!-- 标题区 -->
    <view class="header">
      <text class="title">移动业务办理</text>
      <text class="subtitle">校园专属优惠套餐</text>
    </view>

    <!-- 业务卡片 -->
    <view class="service-grid">
      <view class="service-card" v-for="(service, i) in services" :key="i"
            @click="navigateTo(service.page)">
        <view class="card-icon" :style="{background: service.bgColor}">
          <image :src="service.icon" mode="aspectFit"></image>
        </view>
        <text class="card-title">{{service.title}}</text>
        <text class="card-desc">{{service.desc}}</text>
      </view>
    </view>

    <!-- 我的套餐 -->
    <view class="my-package" v-if="false">
      <view class="section-header">
        <text>我的校园套餐</text>
        <text class="view-all" @click="navigateTo('packages')">查看全部 ></text>
      </view>
      
      <view class="package-card" v-if="false">
        <view class="package-header">
          <text class="name">校园畅享卡</text>
          <text class="price">¥58/月</text>
        </view>
        
        <view class="package-progress">
          <view class="progress-item">
            <text class="label">流量</text>
            <view class="progress-bar">
              <view class="progress-fill" style="width: 65%;"></view>
            </view>
            <text class="value">13.5/20GB</text>
          </view>
          
          <view class="progress-item">
            <text class="label">通话</text>
            <view class="progress-bar">
              <view class="progress-fill" style="width: 30%;"></view>
            </view>
            <text class="value">90/300分钟</text>
          </view>
          
          <view class="progress-item">
            <text class="label">短信</text>
            <view class="progress-bar">
              <view class="progress-fill" style="width: 15%;"></view>
            </view>
            <text class="value">15/100条</text>
          </view>
        </view>
        
        <view class="package-footer">
          <text>到期日: 2023-12-31</text>
          <button class="renew-btn">立即续费</button>
        </view>
      </view>
    </view>

    <!-- 热门套餐 -->
    <view class="hot-packages" v-if="false">
      <view class="section-header">
        <text>热门套餐推荐</text>
      </view>
      
      <swiper class="package-swiper" :autoplay="true" :interval="3000">
        <swiper-item v-for="(pkg, i) in hotPackages" :key="i">
          <view class="swiper-item">
            <view class="pkg-badge" v-if="pkg.is_hot==1">热销</view>
            <text class="pkg-name">{{pkg.name}}</text>
            <text class="pkg-price">¥{{pkg.monthly_fee}}<text>/月</text></text>
            <text class="pkg-desc">{{pkg.description}}</text>
            <!-- <view class="pkg-features">
              <text v-for="(feature, j) in pkg.features" :key="j">{{feature}}</text>
            </view> -->
            <button class="pkg-btn" @click="save(pkg)">立即办理</button>
          </view>
        </swiper-item>
      </swiper>
	
    </view>
	
	<u-popup :show="show" @close="show = false" :round="20" mode="bottom">
	  <view class="popup-container">
	    <view class="popup-header">
	      <text class="popup-title">活动套餐上报</text>
	      <u-icon name="close" size="24" @click="show = false" class="close-icon"></u-icon>
	    </view>
	    
	    <view class="popup-content">
	      <u-form :model="form" ref="form" :rules="rules" label-width="160rpx">
	        <!-- 新手机号输入 -->
	        <u-form-item label="新手机号" prop="newMobile" label-position="top" class="form-item">
	          <u-input 
	            v-model="form.newMobile" 
	            placeholder="请输入11位手机号码" 
	            type="number"
	            maxlength="11"
	            class="custom-input"
	            :custom-style="inputStyle"
	          ></u-input>
	        </u-form-item>
	        
	        <!-- 验证码部分 -->
	        <u-form-item label="验证码" prop="code" label-position="top" class="form-item">
	          <u-input 
	            v-model="form.code" 
	            placeholder="请输入6位验证码" 
	            type="number"
	            class="custom-input"
	            :custom-style="inputStyle"
	          ></u-input>
	          
	          <view class="hint-text">
	            请联系客服获取验证码，发送新手机号给客服即可
	          </view>
	          
	          <view class="service-btn-container">
	            <u-button 
	              type="primary" 
	              @click="contactService"
	              :loading="contactLoading"
	              class="service-btn"
	              shape="circle"
	            >
	              <u-icon name="server-fill" size="20" class="btn-icon"></u-icon>
	              联系客服
	            </u-button>
	          </view>
	        </u-form-item>
	        
	        <!-- 提交按钮 -->
	        <view class="submit-btn-container">
	          <u-button 
	            type="primary" 
	            @click="submitForm"
	            :loading="submitLoading"
	            class="submit-btn"
	            shape="circle"
	            :disabled="!form.newMobile || !form.code"
	          >
	            确认提交
	          </u-button>
	        </view>
	      </u-form>
	    </view>
	  </view>
	</u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      waves: [
        {color: 'rgba(64,158,255,0.1)', height: 80, bottom: 0, duration: 15, delay: 0},
        {color: 'rgba(64,158,255,0.08)', height: 100, bottom: 10, duration: 20, delay: 2},
        {color: 'rgba(64,158,255,0.05)', height: 120, bottom: 20, duration: 25, delay: 4}
      ],
	  rules:{
		  newMobile:[{ required: true, message: '请输入新手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }],
		  code:[{ required: true, message: '请输入验证码' }, { min: 4, message: '验证码至少4位' }]
	  },
      services: [
     
        {
          title: '宽带报装',
          desc: '宿舍覆盖查询',
          icon: '/static/wang.png',
          page: 'broadband',
          bgColor: 'rgba(64,158,255,0.1)'
        },
        // {
        //   title: '活动套餐',
        //   desc: '校园卡联动',
        //   icon: '/static/icons/zg.png',
        //   page: 'recharge',
        //   bgColor: 'rgba(64,158,255,0.1)'
        // },
        {
          title: '故障报修',
          desc: '上传具体信息',
          icon: '/static/gu.png',
          page: 'repair',
          bgColor: 'rgba(64,158,255,0.1)'
        }
      ],
	  show:false,
	  form: {
		  newMobile: '', // 新手机号
		  code: '' // 验证码
		},
		contactLoading: false, // 联系客服按钮加载状态
		submitLoading: false, // 提交按钮加载状态
      hotPackages: [],
	  inputStyle: {
	          'border-radius': '12rpx',
	          'padding': '20rpx 25rpx',
	          'background-color': '#f9f9f9'
	        }
    }
  },
  onLoad() {
  	this.getMobilePlan()
  },
  methods: {
	// 联系客服获取验证码
	contactService() {
	  // 验证手机号是否填写正确
	  if (!this.form.newMobile || !/^1[3-9]\d{9}$/.test(this.form.newMobile)) {
		uni.showToast({title:'请先填写正确的新手机号',icon:'none'});
		return;
	  }
	  this.contactLoading = true;
	  // 这里可根据实际需求实现联系客服的逻辑，例如：
	  // 1. 打开客服聊天窗口（如微信小程序的wx.openCustomerServiceChat）
	  // 2. 自动发送包含新手机号的消息给客服
	  setTimeout(() => {
		// 模拟联系成功
		this.contactLoading = false;
		this.$refs.uToast.show({
		  title: '已为您打开客服窗口，请发送新手机号获取验证码',
		  type: 'success'
		});
	  }, 800);
	},
	
	// 提交验证码给客服验证
	submitForm() {
	  // 表单验证
	  this.$refs.form.validate().then(valid => {
		if (valid) {
		  this.submitLoading = true;
		  // 这里实现提交验证码给客服系统的逻辑
		  // 例如调用后端接口，由后端将验证码提交给客服系统验证
		  setTimeout(() => {
			this.submitLoading = false;
			this.$refs.uToast.show({
			  title: '验证码已提交，客服将尽快处理',
			  type: 'success'
			});
			// 关闭弹窗
			this.show = false;
			// 重置表单
			this.form = { newMobile: '', code: '' };
		  }, 1000);
		}
	  }).catch(err => {
		// 表单验证失败
		console.log('表单错误：', err);
	  });
	},
	async getMobilePlan(){
		const res = await this.$api.get('/MobilePlan/list','',true)
		if(res.data.code === 200) {
			this.hotPackages = res.data.data
		}
	},
	async save() {
		uni.showToast({
			icon:'none',
			title:'暂无权限 ~'
		})
	},
    navigateTo(page) {
		switch(page) {
			case 'recharge':
				this.show = true
			break;
			
			case 'repair':
				uni.navigateTo({
				  url: `/pages/service/mobile/${page}/${page}`
				})
			break;
			case 'broadband':
			
			break;
			default:
			
			break;
		}
      
    }
  }
}
</script>

<style lang="scss" scoped>
	
	.popup-container {
	  padding: 30rpx 40rpx;
	  background: #fff;
	  border-radius: 20rpx 20rpx 0 0;
	  
	  .popup-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 40rpx;
	    
	    .popup-title {
	      font-size: 36rpx;
	      font-weight: bold;
	      color: #333;
	    }
	    
	    .close-icon {
	      color: #999;
	      padding: 10rpx;
	    }
	  }
	  
	  .form-item {
	    margin-bottom: 30rpx;
	    
	   
	  }
	  
	  .custom-input {
	    border: 1rpx solid #eee;
	    border-radius: 12rpx;
	    padding: 20rpx 25rpx;
	    background-color: #f9f9f9;
	  
	  }
	  
	  .hint-text {
	    color: #999;
	    font-size: 24rpx;
	    margin: 15rpx 0 20rpx 0;
	    line-height: 1.6;
	  }
	  
	  .service-btn-container {
	    margin: 20rpx 0 30rpx;
	    
	    .service-btn {
	      width: 240rpx;
	      height: 60rpx;
	      background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
	      box-shadow: 0 4rpx 12rpx rgba(79, 172, 254, 0.3);
	      
	      .btn-icon {
	        margin-right: 8rpx;
	      }
	    }
	  }
	  
	  .submit-btn-container {
	    margin-top: 50rpx;
	    
	    .submit-btn {
	      height: 80rpx;
	      font-size: 32rpx;
	      background: linear-gradient(90deg, #3a7bd5 0%, #00d2ff 100%);
	      box-shadow: 0 6rpx 16rpx rgba(58, 123, 213, 0.2);
	    }
	  }
	}
.mobile-page {
  position: relative;
  min-height: 100vh;
  padding: 20px;
  background: #f8fafc;
  overflow: hidden;
  
  .wave-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 0;
    
    .wave {
      position: absolute;
      width: 200%;
      left: 0;
      border-radius: 50%;
      animation: waveMove linear infinite;
    }
  }
  
  .header {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    
    .title {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 5px;
    }
    
    .subtitle {
      font-size: 16px;
      color: #409EFF;
    }
  }
  
  .service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    
    .service-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px 15px;
      box-shadow: 0 5px 15px rgba(64,158,255,0.1);
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
      }
      
      .card-icon {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        
        image {
          width: 60%;
          height: 60%;
        }
      }
      
      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 5px;
      }
      
      .card-desc {
        font-size: 12px;
        color: #666;
      }
    }
  }
  
  .my-package {
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
    
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      text {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
      
      .view-all {
        font-size: 12px;
        color: #409EFF;
      }
    }
    
    .package-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 5px 15px rgba(64,158,255,0.1);
      
      .package-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        
        .name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
        }
        
        .price {
          font-size: 16px;
          color: #409EFF;
          font-weight: bold;
        }
      }
      
      .package-progress {
        .progress-item {
          margin-bottom: 15px;
          
          .label {
            font-size: 14px;
            color: #666;
            display: block;
            margin-bottom: 5px;
          }
          
          .progress-bar {
            height: 6px;
            background: #f0f4f8;
            border-radius: 3px;
            margin-bottom: 5px;
            overflow: hidden;
            
            .progress-fill {
              height: 100%;
              background: linear-gradient(to right, #64B5F6, #409EFF);
              border-radius: 3px;
            }
          }
          
          .value {
            font-size: 12px;
            color: #999;
          }
        }
      }
      
      .package-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #f0f4f8;
        
        text {
          font-size: 12px;
          color: #999;
        }
        
        .renew-btn {
          background: #409EFF;
          color: white;
          border-radius: 15px;
          font-size: 12px;
          padding: 5px 15px;
        }
      }
    }
  }
  
  .hot-packages {
    position: relative;
    z-index: 1;
    
    .section-header {
      margin-bottom: 15px;
      
      text {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .package-swiper {
      height: 250px;
      
      .swiper-item {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        height: 180px;
        box-shadow: 0 5px 15px rgba(64,158,255,0.1);
        position: relative;
        
        .pkg-badge {
          position: absolute;
          top: 10px;
          right: 10px;
          background: #FF5252;
          color: white;
          font-size: 10px;
          padding: 3px 8px;
          border-radius: 10px;
        }
        
        .pkg-name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 5px;
        }
        
        .pkg-price {
          font-size: 24px;
          font-weight: bold;
          color: #409EFF;
          display: block;
          margin-bottom: 10px;
          
          text {
            font-size: 12px;
            color: #999;
          }
        }
        
        .pkg-desc {
          font-size: 14px;
          color: #666;
          display: block;
          margin-bottom: 10px;
        }
        
        .pkg-features {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 15px;
          
          text {
            font-size: 12px;
            color: #409EFF;
            background: rgba(64,158,255,0.1);
            padding: 3px 8px;
            border-radius: 10px;
          }
        }
        
        .pkg-btn {
          background: #409EFF;
          color: white;
          border-radius: 15px;
          font-size: 14px;
          padding: 5px 15px;
        }
      }
    }
  }
}

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>